<template>
	<view>
		<u-sticky bgColor="#FFF">
			<view class="header">
				<u-picker :show="show" :columns="range" :value="type" @confirm="confirm" @change="changeHandle($event)"
					@cancel="cancel"></u-picker>
				<u-row>
					<u-col span="1"></u-col>
					<u-col span="7" customStyle="font-size:30rpx;color: #919191;">
						排序
					</u-col>
					<u-col span="4">
						<u-button @click="show = true" icon="arrow-down">{{range[0][type-1]}}</u-button>
					</u-col>
				</u-row>

				<u-divider></u-divider>
			</view>
		</u-sticky>

		<view class="card" v-for="(post,index) in postList" :key="index">
			<singlePost :index=index :showUser="true" :isLiked="likes[index]" :showSetting="false" :user="post.user"
				:post="post" @onClick="onClick($event,post,index)" @clickSetting="setting($event)"
				@updateLikes="updateIsliked" />
		</view>
		<view class="more" v-if="!more">
			到底了~~~
		</view>
	</view>
</template>

<script>
	import config from "@/config/config.js"
	import singlePost from "@/components/single-post.vue"
	export default {
		data() {
			return {
				show: false,
				sortType: 0,
				range: [
					["最近发布",
						"最多评论",
						"最多点赞",
						"最多人看过"
					]
				],
				postList: [],
				more: true,
				type: 1,
				likes: []
			};
		},
		components: {
			singlePost
		},
		onShow: function() {
			//TODO:初始化一下likes数组
			for (let i = 0; i < 100; i++) {
				this.likes.push(false)
			}
			this.postList = []
			this.getPostList(new Date().getTime())
		},
		// mounted() {
		// 	this.postList = []
		// 	this.getPostList(new Date().getTime())
		// },
		methods: {
			updateIsliked(params) {
				this.$set(this.likes, params.index, params.isLiked)
			},
			watchPost(pid) {
				uni.navigateTo({
					url: "../post/post?pid=" + pid
				})
			},
			onClick(type, post, index) {
				console.log(type)
				if (["content", 'view', 'comment'].indexOf(type) > -1) this.watchPost(post.pid)
				if (type === "like") this.like(post.pid, index)
				if (type === "unlike") this.unLike(post.pid, index)
				if (type === "user") this.watchUser(post.uid)
			},
			unLike(pid, index) {
				console.log("取消点赞" + pid);
				this.$request.TokenRequest({
					url: "/post/UnLikePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.$set(this.likes, index, false)
						this.$set(this.postList[index], "likes", this.postList[index].likes - 1)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			like(pid, index) {
				console.log("like" + pid)
				this.$request.TokenRequest({
					url: "/post/likePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("点赞成功")
						this.$set(this.likes, index, true)
						this.$set(this.postList[index], "likes", this.postList[index].likes + 1)
						// this.likes[index] = true;
						// this.postList[index].likes += 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						uni.navigateBack({})
					}
				})
			},
			watchUser(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			getPostList(date) {
				this.$request.TokenRequest({
					url: "/post/TheNew"
				}, {
					date: date,
					type: this.type
				}).then(res => {
					if (res.state === 200) {
						this.postList = this.postList.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
					}
				})
			},
			getLatest() {
				let len = this.postList.length;
				if (len == 0) return new Date().getTime()
				else return new Date(this.postList[len - 1].date).getTime()
			},
			changeHandle(e) {
				this.type = e.index + 1;
			},
			sort() {
				this.postList = []
				this.getPostList(new Date().getTime())
			},
			confirm() {
				this.show = false
				// console.log(this.type)
				this.sort()
			},

			cancel() {
				this.show = false
			},
		},

		onReachBottom() {
			//TODO:获取下面的
			if (this.more) {
				this.getPostList(this.getLatest())
			}
		},
		onPullDownRefresh() {
			this.postList = []
			this.getPostList(new Date().getTime())
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding-top: 50rpx;
	}

	.more {
		text-align: center;
		padding: 20rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}

	.card {
		border-bottom: 15rpx solid #F6F6F6;
	}
</style>
